<!-- @format -->

<template>
  <div id="ShopCart" style="padding-bottom: 105px">
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <hr />
    <div class="empty" v-if="show">
      <img
        src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2442292253,3019190831&fm=11&gp=0.jpg"
        alt=""
      />
      <p>你的购物车空空如也~</p>
    </div>
    <!--  商品列表-->
    <div v-if="!show">
      <div class="car-item" v-for="(item, index) in shopcartList" :key="index">
        <van-card
          :price="item.price"
          :desc="item.desc"
          :title="item.title"
          :thumb="item.img"
        >
          <!--  插槽：-->
          <template #tag>
            <!-- 复选框 -->
            <van-checkbox v-model="item.checked"></van-checkbox>
          </template>
          <template #price-top>
            <!-- 复选框 -->
            <van-button
              icon="cross"
              style="position:absolute;right: -14px;top: 4px; border-radius: 50%;width: 10px;height: 10px;color:#00ffdf;border: none;"
              @click="delproduct(item._id, index)"
            />
          </template>
          <!--  插槽数量加减：-->
          <template #bottom>
            <van-stepper
              v-model="item.count"
              input-width="25px"
              button-size="18px"
            />
          </template>
        </van-card>
      </div>
    </div>
    <!-- 提交订单 -->
    <van-submit-bar :price="allprice" button-text="结算">
      <van-checkbox v-model="allcheck">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { get, del } from "@utils/request";
import { mapActions } from "vuex";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      all: false,
      show: true,
      shopcartList: [
        {
          price: 1,
          desc: "",
          title: ""
        }
      ]
    };
  },
  filters: {
    /* num(value, index) {
      return (value = this.shopcartList[index].count);
    } */
  },
  computed: {
    allcheck: {
      set(value) {
        console.log(value);
        return this.shopcartList.forEach(item => (item.checked = value));
      },
      get() {
        return this.shopcartList.every(item => item.checked == true);
      }
    },
    allprice() {
      return this.shopcartList
        .filter(item => item.checked == true)
        .reduce((prv, next) => prv + next.count * next.price * 100, 0);
    }
  },
  watch: {},
  created() {
    Cookies.get("token");
    this.show = !Cookies.get("token");
    // if (!this.$store.state.shopcart.count) {
    //   this.show = true;
    // }
    get("http://localhost:3000/shopcart/findShopcart").then(res => {
      console.log(res);
      res.data.data.forEach(item => {
        item.checked = false;
      });
      // console.log(res.data.data);
      this.shopcartList = res.data.data;
      this.value = res.data.data.count;
      this.sumcount(this.shopcartList.length);
    });
  },
  methods: {
    ...mapActions(["sumcount"]),
    onClickLeft() {
      this.$router.go(-1);
    },
    delproduct(id, index) {
      console.log(id, index);
      this.shopcartList.splice(index, 1);
      del(`http://localhost:3000/shopcart/deleteShopcart/${id}`).then(res => {
        console.log(res);
      });
      if (!this.shopcartList.length) {
        this.show = true;
      } else {
        this.show = false;
      }
    },
    onClickRight() {
      console.log(1);
    }
  }
};
</script>

<style scoped lang="scss">
@import "@sass/ShopCart/ShopCart.scss";
</style>
